<script lang="jsx" setup>
import { ref, watch } from 'vue';
import { InboxOutlined } from '@ant-design/icons-vue';
import { ElUpload } from 'element-plus';
import Form from '@/components/common/form.vue';

const props = defineProps({
  rowData: {
    type: Object,
    default: () => null
  }
});

console.log('props.rowData:', props.rowData);
const formRef = ref(null);

function getModal() {
  if (props.rowData) {
    const { appVersion, appUpdateInfo, appRemark, appSize } = props.rowData;
    return { appVersion, appUpdateInfo, appRemark, appSize, appName: 'CDL管理系统' };
  }
  return {
    appVersion: null,
    appUpdateInfo: null,
    appRemark: null,
    appSize: null,
    appName: 'CDL管理系统'
  };
}

const model = ref(getModal());

const formList = [
  {
    type: 'tabs',
    name: '基本信息',
    span: 24
  },
  {
    type: 'input',
    key: 'appVersion',
    label: '版本号',
    placeholder: '请输入版本号',
    span: 24,
    rule: {
      required: true,
      message: '请输入版本号',
      trigger: 'change'
    }
  },
  {
    type: 'textarea',
    key: 'appUpdateInfo',
    label: '更新信息',
    placeholder: '请输入更新信息',
    span: 24
  },
  {
    type: 'textarea',
    key: 'appRemark',
    label: '备注',
    placeholder: '请输入备注',
    span: 24
  },
  {
    type: 'tabs',
    name: 'APP包',
    span: 24
  }
];

const fileList = ref([]);

function handleChange(file, fileList) {}

const uploadRef = ref(null);

async function validateForm() {
  await formRef.value.validateForm();
}

const beforeUpload = rawFile => {
  console.log('rawFile', rawFile);

  return false;
};

watch(
  () => fileList.value,
  val => {
    model.value.appSize = `${(val[0].size / 1024 / 1024).toFixed(2)}MB`;
  },
  {
    deep: true
  }
);

defineExpose({
  model: model.value,
  fileList,
  validateForm
});
</script>

<template>
  <div class="event-form">
    <Form ref="formRef" v-model:model="model" :form-list="formList"></Form>
    <!--
 <AUploadDragger
      v-model:fileList="fileList"
      name="file"
      :before-upload="beforeUpload"
      :multiple="true"
      @change="handleChange"
    >
      <p class="ant-upload-drag-icon">
        <InboxOutlined></InboxOutlined>
      </p>
      <p class="ant-upload-text">单击或拖动文件到此区域进行上传</p>
    </AUploadDragger>
-->
    <ElUpload
      ref="uploadRef"
      v-model:file-list="fileList"
      :limit="1"
      accept=".apk"
      :auto-upload="false"
      drag
      :before-upload="beforeUpload"
      :on-change="handleChange"
    >
      <p class="upload-drag-icon">
        <InboxOutlined></InboxOutlined>
      </p>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
    </ElUpload>
  </div>
</template>

<style lang="scss" scoped>
.upload-drag-icon {
  font-size: 50px;
  color: #646cff;
}
.el-upload__text {
  em {
    color: #646cff;
  }
}
</style>
